<template>
  <div class="container">
    <div class="scroll-title">
      <div
        class="title-col"
        v-for="(item, index) in tableDataCompany.tableColumns"
        :key="index"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="scroll-content">
      <vue-seamless-scroll
        :data="tableDataCompany.tableData"
        :class-option="classOption"
      >
        <div
          class="scroll-item"
          v-for="(item, index) in tableDataCompany.tableData"
          :key="index"
        >
          <div class="name" :title="item.target">{{ item.companyName }}</div>
          <div class="name" :title="item.category">{{ item.rate }}</div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const data = {
  tableColumns: [
    {
      prop: "companyName",
      label: "企业名称",
    },
    {
      prop: "rate",
      label: "外迁概率",
    },
  ],
  tableData: [
    {
      companyName: "赣州顾明家居有限公司",
      rate: "较低",
    },
    {
      companyName: "赣州美艺森家具有限公司",
      rate: "较低",
    },
    {
      companyName: "赣州木韵和居家具有限公司",
      rate: "低",
    },
    {
      companyName: "赣州聚昇家居有限公司",
      rate: "较低",
    },
    {
      companyName: "赣州市南康区靓佳水涂料商行",
      rate: "低",
    },
    {
      companyName: "赣州臻尚优选家居有限公司",
      rate: "较低",
    },
    {
      companyName: "赣州富美云家居有限公司",
      rate: "低",
    },
    {
      companyName: "赣州市南康区迪曼家具有限公司",
      rate: "较低",
    },
    {
      companyName: "赣州沁甯家具有限公司",
      rate: "较低",
    },
    {
      companyName: "赣州富江南家居有限公司",
      rate: "低",
    },
  ],
};
const tableDataCompany = ref(data);
const classOption = ref({
  step: 0.35, // 滚动的速度
  limitMoveNum: 1, // 开始无缝滚动的数据量
  hoverStop: true, // 鼠标悬停，true/false
  direction: 1, // 滚动的方向，0向下 1向上 2向左 3向右
  openWatch: true, // 开启数据实时监控刷新dom，true/false
  singleHeight: 47, // 滚动多少高度停留一次
  singleWidth: 0, // 无缝不停止的滚动
  waitTime: 500, // 单步运动停止的时间(默认值1000ms)
});
</script>
<style lang="less" scoped>
.container {
  height: 290px;
  width: 300px;
  overflow: hidden;
  background: rgb(26, 67, 132);
  .scroll-title {
    height: 50px;
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    align-items: center;
    background: url("~@/assets/images/list/table_monitor_head.png") no-repeat;
    background-size: 100% 100%;
    padding-left: 20px;
    padding-right: 20px;

    .title-col {
      font-family: Source Han Sans SC;
      font-weight: 400;
      font-size: 18px;
      //color: #AEC3DC;
      color: #ffffff;
      line-height: 32px;
    }
  }

  .scroll-content {
    height: 220px;
    overflow: hidden;

    .scroll-item {
      display: grid;
      grid-template-columns: 2.5fr 1fr;
      align-items: center;
      height: 47px;
      background: url("@/assets/images/list/table_monitor_row.png") no-repeat;
      background-size: 100% 100%;
      padding-left: 20px;
      padding-right: 20px;

      > div {
        padding: 0 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .name {
        font-weight: 400;
        font-size: 18px;
        color: #d5ddf4;
        line-height: 47px;
        opacity: 0.89;
      }

      .award {
        font-weight: 400;
        font-size: 18px;
        color: #d1ecff;
        line-height: 47px;
        opacity: 0.89;
      }
    }
  }
}
</style>
